<template>
  <div id="Government_drugs_review">
    <span>
      <img src="../assets/enterprise.png" alt="" class="bread-icon">
    </span>
    <!-- 面包屑导航 -->
    <el-breadcrumb style="display:inline-block">
      <el-breadcrumb-item>
        <span style="font-size:20px;">企业管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span style="font-size:15px;line-height:20px;">企业入驻审核</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content-wrap">
      <div class="topNav">
        <span class="navLeft">企业查询</span>
        <span class="navRight">
          <el-button size="small" @click="companySearch()">搜索</el-button>
          <!-- <el-button size="small" type="primary" @click="setColumns">设置</el-button> -->
        </span>
        <span class="navMid">
          <img class="icon-search" src="../assets/search.png" alt="">
          <el-input v-model="searchData" size="small" placeholder="请输入内容" class="searchInput"></el-input>
        </span>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData" border class="table-common" :max-height="tableHeight">
        <el-table-column type="index" label="#">
        </el-table-column>
        <el-table-column prop="base_info" label="企业名" v-if='columns.contains("企业名")'>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.is_verfied" type="danger" plain size="mini" disabled>已审核</el-button>
            <el-button type="danger" plain size="mini" disabled>未审核</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="showForm(scope.row)" type="info" plain size="mini">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <!-- 表格详细信息 弹窗 -->
    <el-dialog title="详细信息" :visible.sync="dialogTableVisible" width="70%">
      <el-form :inline="true" :model="base_info" label-width="130px" class="form-common">
        <el-form-item label="企业名称">
          <el-input v-model="base_info.name" placeholder="企业名称" disabled></el-input>
        </el-form-item>
        <el-form-item label="所在省市区">
          <el-input v-model="base_info.location" placeholder="所在省市区" disabled></el-input>
        </el-form-item>
        <br>
        <el-form-item label="直属药监局">
          <el-input v-model="base_info.drug_admin" placeholder="直属药监局" disabled></el-input>
        </el-form-item>
        <el-form-item label="法定代表人">
          <el-input v-model="base_info.legal_person" placeholder="法定代表人" disabled></el-input>
        </el-form-item>
        <br>
        <el-form-item label="组织机构代码">
          <el-input v-model="base_info.org_code" placeholder="组织机构代码" disabled></el-input>
        </el-form-item>
        <el-form-item label="企业邮寄地址">
          <el-input v-model="base_info.express_address" placeholder="企业邮寄地址" disabled></el-input>
        </el-form-item>
        <br>
        <el-form-item label="企业注册地址">
          <el-input v-model="base_info.register_address" placeholder="企业注册地址" disabled></el-input>
        </el-form-item>
        <el-form-item label="企业类型">
          <el-input v-model="base_info.type" disabled></el-input>
        </el-form-item>
        <br>
        <el-form-item label="邮编">
          <el-input v-model="base_info.zip_code" placeholder="邮编" disabled></el-input>
        </el-form-item>
        <el-form-item label="生产范围">
          <el-input v-model="base_info.production_range" placeholder="生产范围" disabled></el-input>
        </el-form-item>
        <br>
        <el-form-item label="所属总公司">
          <el-input v-model="base_info.head_company" placeholder="所属总公司" disabled></el-input>
        </el-form-item>
        <el-form-item label="是否法人机构">
          <el-input v-if="base_info.is_legal" value="是" disabled></el-input>
          <el-input v-else value="否" disabled></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="自定义列表" :visible.sync="setColumnsShow">
      <template>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="columns" @change="handleCheckedHeaderChange" class="tableSelect">
          <el-checkbox v-for="city in columnsSelect" :label="city" :key="city" border>{{city}}</el-checkbox>
        </el-checkbox-group>
        <div style="text-align:right">
          <el-button type="primary" plain @click="setLocalColumns">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 药品列表 -->
    <el-dialog title="药品信息" :visible.sync="dialogDrugsVisible" width="60%">
      <el-table :data="drugsList" border class="table-common" max-height="450">
        <el-table-column prop="id" label="药品id">
        </el-table-column>
        <el-table-column prop="common_name" label="药品通用名称">
        </el-table-column>
        <el-table-column prop="approval_number" label="批准文号">
        </el-table-column>
        <el-table-column prop="created_at" label="生产日期">
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="showDrugsDetail(scope.row)" type="info" plain size="mini">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
  const headerOptions = ['企业名', '状态'];
  export default {
    data() {
      return {
        dialogTableVisible: false,
        dialogFormVisible: false,
        dialogDrugsVisible: false,
        dialogLinkVisible: false,
        tabPosition: 'left',
        setColumnsShow: false,
        isIndeterminate: true,
        checkAll: false,
        adminId: '',
        enterprise: '',
        adminToken: '',
        searchData: '',
        tableData: [{}],
        tableHeight: 400,
        gridData: [{}],
        base_info: {},
        drugsList: [],
        formLabelWidth: '150px',
        columns: [
          '企业名',
          '直属药监局',
          '企业邮寄地址',
          '法定代表人',
        ],
        columnsSelect: headerOptions,
        link_info: {
          id: '',
          base_info: '',
          down_relations: [],
          up_relations: []
        },
      }
    },
    methods: {
      companySearch() {
        if (this.searchData != '') {
          this.$http({
            url: '/enterprise/?search=' + this.searchData + '&is_verified=false',
            method: 'get',
            headers: {
              'Authorization': 'Token ' + this.adminToken
            },
          }).then(
            response => {
              this.tableData = []
              this.tableData = response.data.results
              this.$message({
                message: '查询成功',
                showClose: true,
                type: 'success'
              });
            }
          ).catch(error => {
            console.log(error.response)
            if (error.response.status == 401) {
              this.$message({
                message: error.response.data.detail,
                type: 'warning'
              })
              this.$router.push({
                path: '/login'
              });
            } else if (error.response.status == 400) {
              this.$message({
                message: 'error400',
                type: 'error'
              })
            } else {
              this.$message({
                message: '未知错误',
                type: 'error'
              })
            }
            console.log(error);
          });
        } else {
          this.$http({
            url: '/enterprise/?is_verified=false',
            // url: '/drugs/'+adminId +'/',
            method: 'get',
            headers: {
              'Authorization': 'Token ' + this.adminToken
            },
            data: {
              page: 1,
              form: '',
              enterprise_id: this.adminId,
              search: '',
              ordering: ''
            }
          }).then(
            response => {
              //success
              console.log(response)
              this.tableData = [];
              this.tableData = response.data.results
              console.log(this.tableData)
            },
            response => {
              //error
              console.log(response)
              //   this.$message({
              //   message: response.data.detail,
              //   type: 'warning'
              // });
            }
          )
        }
      },
      showForm(row) {
        if (row.id != '') {
          this.$http({
            url: '/enterprise/' + row.id + '/',
            method: 'get',
            headers: {
              'Authorization': 'Token ' + this.adminToken
            },
          }).then(
            response => {

              this.$message({
                message: '查询成功',
                showClose: true,
                type: 'success'
              });
              this.base_info = response.data.base_info
              this.dialogTableVisible = true
            }
          ).catch(error => {
            console.log(error.response)
            if (error.response.status == 401) {
              this.$message({
                message: error.response.data.detail,
                type: 'warning'
              })
              this.$router.push({
                path: '/login'
              });
            } else if (error.response.status == 400) {
              this.$message({
                message: 'error400',
                type: 'error'
              })
            } else {
              this.$message({
                message: '未知错误',
                type: 'error'
              })
            }
            console.log(error);
          });
        }

      },
      changeForm(row) {
        this.dialogFormVisible = true
        this.formData = row;
        console.log(this.formData);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      setColumns: function () {
        this.setColumnsShow = true
        // this.columns.push('standard')
      },
      setLocalColumns: function () {
        this.setColumnsShow = false
        localStorage.setItem('GovernmentCompanyReviewColumns', JSON.stringify({
          colums: this.columns
        }))
        this.$message({
          type: 'success',
          message: '保存成功'
        })
      },
      handleCheckAllChange(val) {
        this.columns = val ? headerOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedHeaderChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.columnsSelect.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnsSelect.length;
        console.log(this.columns)
      },
      showDrugList(row) {
        this.$http({
          url: './drugs/?enterprise__id=' + row.id,
          method: 'get',
          headers: {
            'Authorization': 'Token ' + this.adminToken
          }
        }).then(
          response => {
            this.drugsList = []
            this.drugsList = response.data.results
          }
        ).catch(error => {
          console.log(error.response)
          if (error.response.status == 401) {
            this.$message({
              message: error.response.data.detail,
              type: 'warning'
            })
            this.$router.push({
              path: '/login'
            });
          } else if (error.response.status == 400) {
            this.$message({
              message: 'error400',
              type: 'error'
            })
          } else {
            this.$message({
              message: '未知错误',
              type: 'error'
            })
          }
          console.log(error);
        });
        this.dialogDrugsVisible = true
      },
      showDrugsDetail(row) {
        this.$store.commit('setSearchDrug', {
          id: row.approval_number
        })
        this.$router.push({
          path: '/home/government_drugs_search'
        });
      },
      //关联关系
    },

    mounted() {
      this.adminId = this.$store.getters.getInfo.id
      this.adminToken = this.$store.getters.getInfo.token
      this.enterprise = this.$store.getters.getInfo.enterprise
      this.tableHeight = document.getElementsByClassName('table-common')[0].parentNode.clientHeight - 112
      if (localStorage.getItem('GovernmentCompanyReviewColumns')) {
        this.columns = JSON.parse(localStorage.getItem('GovernmentCompanyReviewColumns')).colums
      }
      this.tableHeight = document.getElementsByClassName('table-common')[0].parentNode.clientHeight - 112
      this.$http({
        url: './enterprise/?is_verified=false',
        method: 'get',
        headers: {
          'Authorization': 'Token ' + this.adminToken
        },
      }).then(response => {
        console.log(response)
        this.tableData = response.data.results
      }).catch(error => {
        console.log(error.response)
        if (error.response.status == 401) {
          this.$message({
            message: error.response.data.detail,
            type: 'warning'
          })
          this.$router.push({
            path: '/login'
          });
        } else if (error.response.status == 400) {
          this.$message({
            message: 'error400',
            type: 'error'
          })
        } else {
          this.$message({
            message: '未知错误',
            type: 'error'
          })
        }
        console.log(error);
      });
    }
  }

</script>

<style scoped>
  #Government_drugs_review>>>.el-dialog {
    max-width: 900px;
    max-height: 600px;
    overflow: scroll;
  }

  #Government_drugs_review>>>.el-input {
    width: 220px;
  }
  /* #Company_medcode >>> .el-dialog input{
    width: 250px;
} */

</style>
